Support for transition:persist directive #840
Conversation
🦋 Changeset detectedLatest commit: e625f45 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
!preview view-transitions |
|
|
!preview view-transitions |
|
| p.println(fmt.Sprintf("}, %s, %s);", filenameArg, propagationArg)) | ||
| p.println(fmt.Sprintf("export default %s;", componentName)) | ||
| } | ||
|
|
||
| var skippedAttributes = map[string]bool{ | ||
| "define:vars": true, |
There was a problem hiding this comment.
These are exactly the same except that the object form doesn't skip define:vars.
| // If there no value, create a transition scope for this element | ||
| if n.Attr[transitionPersistIndex].Val != "" { | ||
| // Just rename the attribute | ||
| n.Attr[transitionPersistIndex].Key = "data-astro-transition-persist" |
There was a problem hiding this comment.
<div transition:persist="media-player"> we only need to transform this to a data-attribute. No runtime processing is needed.
| // Just rename the attribute | ||
| n.Attr[transitionPersistIndex].Key = "data-astro-transition-persist" | ||
|
|
||
| } else if transform.HasAttr(n, transform.TRANSITION_NAME) { |
There was a problem hiding this comment.
If there is a transition:name on the element, use that as the persist value as well.
<div transition:name="media-player" transition:persist> This just avoids repeating the same thing.
| n.Attr[transitionPersistIndex].Type = transitionNameAttr.Type | ||
| } else { | ||
| fmt.Printf("NO VALUE - %v\n", n.TransitionScope) | ||
| n.Attr = append(n.Attr, astro.Attribute{ |
There was a problem hiding this comment.
No value provided, so we will assign a value at runtime based on the position of the element within the component and the number of times this component has been used. This is the same algorithm used to auto-name view-transition-name. Subject to change/better algorithm.
<div transition:persist>
|
!preview view-transitions |
|
Changes
transition:persist. In terms of the compiler this works a lot liketransition:nameandtransition:animate, but calls a different functioncreateTransitionScopewhich creates a distinct name so that the element can be found on the new page.experimentalPersistencebecause there is a new exported function, so this flag is needed to prevent breakage when using a new compiler version with an old Astro version (unlikely).Testing
Docs